<!DOCTYPE html>
<html>
	<head>
		<title data-i18n>HTML5test - How well does your browser support HTML5?</title>	

		<meta charset="UTF-8">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		
		<link rel="stylesheet" href="/css/main.css" type="text/css">
		<link rel="stylesheet" href="/css/reporting.css" type="text/css">

		<script src='/translation.js' type='text/javascript'></script>

		<script src='/scripts/base.js' type='text/javascript'></script>
		<script src='/scripts/reporting.js' type='text/javascript'></script>

		<script src='/scripts/jquery/jquery-1.7.2.min.js' type='text/javascript'></script>
		<script src='/scripts/highcharts/highcharts.src.js' type='text/javascript'></script>
		<script src="/scripts/highcharts/modules/exporting.js" type="text/javascript"></script>
		<script src="/scripts/fullscreen.js" type="text/javascript"></script>

		<meta name="application-name" content="HTML5test"/>

		<link rel="apple-touch-icon" sizes="57x57" href="/images/icons/apple-touch-icon-57x57.png" />
		<link rel="apple-touch-icon" sizes="114x114" href="/images/icons/apple-touch-icon-114x114.png" />
		<link rel="apple-touch-icon" sizes="72x72" href="/images/icons/apple-touch-icon-72x72.png" />
		<link rel="apple-touch-icon" sizes="144x144" href="/images/icons/apple-touch-icon-144x144.png" />
		<link rel="apple-touch-icon" sizes="60x60" href="/images/icons/apple-touch-icon-60x60.png" />
		<link rel="apple-touch-icon" sizes="120x120" href="/images/icons/apple-touch-icon-120x120.png" />
		<link rel="apple-touch-icon" sizes="76x76" href="/images/icons/apple-touch-icon-76x76.png" />
		<link rel="apple-touch-icon" sizes="152x152" href="/images/icons/apple-touch-icon-152x152.png" />
		<link rel="icon" type="image/png" href="/images/icons/favicon-16x16.png" sizes="16x16" />
		<link rel="icon" type="image/png" href="/images/icons/favicon-32x32.png" sizes="32x32" />
		<link rel="icon" type="image/png" href="/images/icons/favicon-96x96.png" sizes="96x96" />
		<link rel="icon" type="image/png" href="/images/icons/favicon-160x160.png" sizes="160x160" />
		<link rel="icon" type="image/png" href="/images/icons/favicon-196x196.png" sizes="196x196" />
		<meta name="msapplication-TileColor" content="#0092bf" />
		<meta name="msapplication-TileImage" content="/images/icons/mstile-144x144.png" />
	</head>
	
	<body>
		<div class='header'>
			<h1 data-i18n><span>HTML<strong>5</strong>test</span> <em>how well does your browser support HTML5?</em></h1>
			<div class='navigation'>
				<ul class='left'>
					<li><a href='/index.html' data-i18n>Your browser</a></li>
					<li class='selected'><a href='/results/desktop.html' data-i18n>Other<span> browser</span>s</a></li>
					<li><a href='/compare/browser/index.html' data-i18n>Compare</a></li>
				</ul>
				<ul class='right'>
					<li><a href='http://blog.html5test.com/' data-i18n>News</a></li>
					<li><a href='/devicelab'>Device Lab</a></li>
					<li><a href='/about.html' data-i18n>About<span> the test</span></a></li>
				</ul>
			</div>
		</div>
		
		<div class='page'>
			<div class='column'>
				<div class='paper hasNavigation'>
					<ul class='navigation'>
						<li class='<?php echo $type == 'desktop' ? 'selected' : ''; ?>'><a data-i18n href='/results/desktop.html'>Desktop<span> browsers</span></a></li>
						<li class='<?php echo $type == 'tablet' ? 'selected' : ''; ?>'><a data-i18n href='/results/tablet.html'>Tablets</a></li>
						<li class='<?php echo $type == 'mobile' ? 'selected' : ''; ?>'><a data-i18n href='/results/mobile.html'>Mobiles</a></li>
						<li class='<?php echo $type == 'other' ? 'selected' : ''; ?>'><a data-i18n href='/results/other.html'>Other</a></li>
						<li class='more'><a data-i18n href='/results/search.html'>Search</a></li>
						<li class='more'><a data-i18n href='/results/latest.html'>Latest</a></li>
					</ul>
				
					<div>
						
						<?php if ($type == 'desktop' || $type == 'mobile' || $type == 'tablet'): ?>
						<div class='overviewPanel'>
							<h2 data-i18n>Overview</h2>
							<div class='horizontalOverflow'>
								<table class='overviewTable'>
									<thead>
										<tr>
											<th>&nbsp;</th>
											<?php foreach($mainColumns as $c): ?>
												<th><?php echo $c; ?></th>
											<?php endforeach; ?>
										</tr>
									</thead>
									<tbody>
										<?php for ($r = 0; $r < $mainRows; $r++): ?>
										<tr>
											<th class='<?php echo $r == 0 ? 'development' : ''; ?><?php echo $r == 1 ? 'current' : ''; ?>'>
												<?php echo $r == 0 ? 'Upcoming' : ''; ?><?php echo $r == 1 ? 'Current' : ''; ?><?php echo $r == 2 ? 'Older' : ''; ?>
											</th>
											
											<?php foreach($main as $d): ?>
												<td class='<?php echo $r == 0 ? 'development' : ''; ?><?php echo $r == 1 ? 'current' : ''; ?>'><?php 
													if (!is_null($d[$r])) {
														echo '<span class="version"><span><span>' . $d[$r]->version . '</span></span></span> <span class="points">' . $d[$r]->score . '</span>'; 
													}
												?></td>
											<?php endforeach; ?>
										</tr>
										<?php endfor; ?>
									</tbody>
								</table>
							</div>
						</div>

						<hr>
						<?php endif; ?>

	
						<div class='scorePanel'>
							<h2 data-i18n>Scores</h2>
							
							<div id='scoreToggle'></div>

							<div class='left'>
								<?php if (isset($results['current'])): ?>
								<div>
									<h3 data-i18n>Current</h3>
									<table class='scoreTable'>
										<thead>
											<tr>
												<th class='points' data-i18n>Score</th>
												<th class='nickname' data-i18n>Browser</th>
												<th class='details'></th>
											</tr>
										</thead>
										<tbody>
											<?php foreach($results['current'] as $item): ?>
											<tr class='<?php echo $item->listed == 0 ? 'secondary' :''; ?>'>
												<td class='points'><?php echo $item->score; ?></td>
												<th class='nickname'>
													<?php if ($item->points != ''): ?>
														<a href='/compare/browser/<?php echo $item->variant . ($item->version ? '-' . $item->version : ''); ?>.html'><?php echo $item->nickname; ?> <span>»</span></a>
													<?php else: ?>
														<?php echo $item->nickname; ?>
													<?php endif; ?>
												</th>
												<th class='details'><?php echo $item->details; ?></th>
											</tr>
											<?php endforeach; ?>
										</tbody>
									</table>
								</div>
								<?php endif; ?>
			
								<?php if (isset($results['development'])): ?>
								<div>
									<h3 data-i18n>Upcoming</h3>
									<table class='scoreTable'>
										<thead>
											<tr>
												<th class='points' data-i18n>Score</th>
												<th class='nickname' data-i18n>Browser</th>
												<th class='details'></th>
											</tr>
										</thead>
										<tbody>
											<?php foreach($results['development'] as $item): ?>
											<tr class='<?php echo $item->listed == 0 ? 'secondary' :''; ?>'>
												<td class='points'><?php echo $item->score; ?></td>
												<th class='nickname'>
													<?php if ($item->points != ''): ?>
														<a href='/compare/browser/<?php echo $item->variant . ($item->version ? '-' . $item->version : ''); ?>.html'><?php echo $item->nickname; ?> <span>»</span></a>
													<?php else: ?>
														<?php echo $item->nickname; ?>
													<?php endif; ?>
												</th>
												<th class='details'><?php echo $item->details; ?></th>
											</tr>
											<?php endforeach; ?>
										</tbody>
									</table>
								</div>
								<?php endif; ?>
							</div>
							
							<div class='right'>
								<?php if (isset($results['legacy'])): ?>
								<div>
									<h3 data-i18n>Older</h3>
									<table class='scoreTable'>
										<thead>
											<tr>
												<th class='points' data-i18n>Score</th>
												<th class='nickname' data-i18n>Browser</th>
												<th class='details'></th>
											</tr>
										</thead>
										<tbody>
											<?php foreach($results['legacy'] as $item): ?>
											<tr class='<?php echo $item->listed == 0 ? 'secondary' :''; ?>'>
												<td class='points'><?php echo $item->score; ?></td>
												<th class='nickname'>
													<?php if ($item->points != ''): ?>
														<a href='/compare/browser/<?php echo $item->variant . ($item->version ? '-' . $item->version : ''); ?>.html'><?php echo $item->nickname; ?> <span>»</span></a>
													<?php else: ?>
														<?php echo $item->nickname; ?>
													<?php endif; ?>
												</th>
												<th class='details'><?php echo $item->details; ?></th>
											</tr>
											<?php endforeach; ?>
										</tbody>
									</table>
								</div>
								<?php endif; ?>
							</div>
						</div>	

						<script>
						
							new ToggleSwitch({
								parent:		document.getElementById('scoreToggle'),
								inactive:	'Most used',
								active:		'All browsers',
								onChange:	function(active) {
												var tables = document.getElementsByClassName('scoreTable');
											
												if (active) {
													for (var i = 0; i < tables.length; i++) {
														tables[i].className += ' showAll';
													}
												} else {
													for (var i = 0; i < tables.length; i++) {
														tables[i].className = tables[i].className.replace(' showAll', '');
													}
												}
											}
							});

						</script>
								
						
						<?php if ($type == 'desktop' || $type == 'mobile' || $type == 'tablet'): ?>
						<hr>
						
						<div class='timelinePanel'>
							<div id='fsCanvas'>
								<h2 data-i18n>Timeline</h2>
								<button id='fsButton' style='display: none;'></button>
								<br>
								
								<div id='timelineGraph' style='height: 500px;'></div>
								
								<script>
								
									var sets = <?php echo json_encode(array_values($sets)); ?>;
									var series = [];
									
									var start = new Date().getTime();
									
									for (var i = 0; i < sets.length; i++) {
										var s = {
											name: sets[i].name,
											data: []
										}
										
										for (var j = 0; j < sets[i].data.length; j++) {
											var ts = new Date().getTime();
											
											if (sets[i].data[j].release) {
												var date = sets[i].data[j].release.split('-');
												var ts = Date.UTC(date[0], parseInt(date[1], 10) - 1, date[2]);
											}
											
											start = Math.min(ts, start);
											
											s.data.push({
												name:		sets[i].data[j].nickname,
												status:		sets[i].data[j].status,
												importance:	sets[i].data[j].importance,
												x: 			ts,
												y: 			parseInt(sets[i].data[j].score, 10)
											});
										}
										
										series.push(s);
									}
									
									Highcharts.setOptions({
									    chart: {
									        style: {
									            fontFamily: '"HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", "Helvetica", "Arial", "Lucida Grande", sans-serif'
									        }
									    }
									});
								
									var chart = new Highcharts.Chart({
										
										chart: {
											renderTo: 'timelineGraph',
											zoomType: 'x',
											type: 'line'
										},
										credits: {
											enabled: false
										},
										title: {
											text: t('HTML5test.com score over the years')
										},
										legend: {
											borderWidth: 0,
											margin: 40
										},
										xAxis: {
											type: 'datetime',
											min: Math.max(start, Date.UTC(2008,9,1)),
											dateTimeLabelFormats: { 
												month: '%b %Y',
												year: '%b %Y'
											}
										},
										yAxis: {
											title: {
												text: t('Score (points)')
											},
											min: 0
										},
										tooltip: {
											formatter: function() {
													return '<b>'+ this.key +'</b><br/>'+
													(this.point.status != 'development' ? Highcharts.dateFormat('%b %Y', this.x) : t('Unreleased'))  +'<br>' + 
													this.y +' points';
											}
										},
										
										plotOptions: {
										    series: {
										        step: 'left' 
										    }
										},
										series: series
									});
			
									for (var s = 0; s < chart.series.length; s++) {
										if (chart.series[s].data[0].importance < 1) {
											chart.series[s].hide();
										}
										/*
										console.debug(chart.series[s].data[0])						
										switch(chart.series[s].name) {
											case 'Android':
											case 'Blackberry':
											case 'Chrome':
											case 'Firefox':
											case 'Internet Explorer':
											case 'iOS':
											case 'Opera':
											case 'Safari':
											case 'Windows':
												break;
											default:
												chart.series[s].hide();
										}
										*/
									}
									
									var canvas = document.getElementById('fsCanvas');
									var button = document.getElementById('fsButton');
									
									if (canvas.requestFullscreen) {
										button.style.display = '';
										button.addEventListener('click', function() {
											if (document.fullscreenElement) 
												document.exitFullscreen();
											else
												canvas.requestFullscreen();
										}, true);
									}
									
								</script>
							</div>
						</div>
						<?php endif; ?>
						
						<hr>
	
						<h3 data-i18n>About these scores</h3>
						<div class='text' data-i18n='score-explaination'>
							The data above is compiled from automatically submitted test results. It is possible your results 
							may differ slightly due to external factors such as settings and which operating system is used.
							If you believe the data above is incorrect, or if you think we are missing an important browser
							or device, please open a bug report at <a href='http://github.com/NielsLeenheer/html5test'>Github</a>.
						</div>
					</div>
				</div>
				
				<div class='footer'>
					<div>
						<div class='copyright'>
							<p>
								Created by Niels Leenheer. 
								Please note that the HTML5 test is not affiliated with the W3C or the HTML5 working group.
								HTML5 Logo by <a href="http://www.w3.org/"><abbr title="World Wide Web Consortium">W3C</abbr></a>
							</p>
							
							<div id='cloudvps'>
								<a href="http://www.cloudvps.nl" target="_blank" ><b>CloudVPS</b><br> High Availability<br> Cloud Servers</a>
							</div>
						</div>
					</div>
				</div>
			</div>		
		</div>

		<script src='//www.google-analytics.com/ga.js'></script>
		<script>
		<!--
			try {
				var pageTracker = _gat._getTracker("UA-68192-4");
				pageTracker._trackPageview();
			} catch(err) {}
		//-->
		</script>
	</body>
</html>
